body{
    background: #ededec;
    font-family: ubuntu;
    margin: 0px;
}

#header{
    height: 100px;
    background: #3f3e3f;
}

#header #head{
    width: 900px;
    height: 80px;
    margin: 0px auto;
    padding-top: 25px;
}

#header #head h1, #header-hasil #head h1{
    font-size: 12px;
    color: #fff;
    float: left;
    margin-left: 40px;
    font-family: ubuntu-kurus;
}

#header #head #logo a, #header-hasil #head #logo a{
    width: 100px;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
    float: left;
}

#header #head .button, #header-hasil #head .button{
    width: 100px;
    height: 25px;
    background: #fdc86b;
    float: right;
    margin-right: 15px;
    text-align: center;
    color: #7e6436;
    vertical-align: central;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    font-family: ubuntu;
}

#header-hasil{
    height: 50px;
    background: #3f3e3f;
    padding-top: 20px;
}

#header-hasil #head{
    width: 900px;
    height: 60px;
    margin: 0px auto;
}

#button-add input{
    width: 150px;
    height: 35px;
    background: #fdc86b;
    float: right;
    margin-right: 5px;
    text-align: center;
    color: #7e6436;
    vertical-align: central;
    border: none;
    cursor: pointer;
    border-radius: 0px 0px 2px 2px;
    font-family: ubuntu;
}

#button-add input:hover{
    height: 40px;
    padding-top: 5px;
}

#wrapper{
    width: 900px;
    margin: 0px auto;
    font-size: 12px;
    height: max-content;
    display: block;
}

#wrapper h1{
    font-size: 11px;
    font-weight: normal;
}

#wrapper #search{
    width: 700px;
    height: 310px;
    margin: 0px auto;
}

#wrapper #search #search-box, #search-hasil #search-box{
    width: 400px;
    height: 40px;    
    border: solid 2px #d0d0ce;
    border-radius: 2px;
    font-family: ubuntu;
}

#wrapper #search select, #search-hasil select{
    height: 40px;
    width: 130px;
    border: solid 2px #d0d0ce;
    border-radius: 2px;
    font-family: ubuntu;
}

#wrapper #search #namboot{
    height: 39px;
    width: 190px;
    margin: 0px auto;
    border-radius: 2px;
    font-family: ubuntu;
}

#wrapper #search #namboot #namboot-button{
    height: 40px;
    width: 190px;
    background: #fdc86b;
    border: solid 2px #b8975c;
    color: #7e6436;
    cursor: pointer;
    padding: 0px;
    margin-top: 30px;
    border-radius: 2px;
    font-family: ubuntu;
}

#categories{
    margin: 0px auto;
    width: 750px;
    margin-top: 25px;
    margin-bottom: 25px;
    display: block;
}

#categories-hasil{
    margin: 0px auto;
    margin-top: 25px;
    margin-bottom: 25px;
    display: block;
    float: left;
    margin-left: 10px;
    height: 500px;
}

.category-item{
    width: 100px;
    height: 200px;
    display: block;
    float: left;
    text-align: center;
    font-size: 12px;
    margin-right: 5px;
    font-family: ubuntu-kurus;
}

.category-item:hover{
    color: #d2ab67;
}

#footer{
    height: 85px;
    background: #fff;
    font-family: ubuntu-kurus;
    font-size: 11px;

    text-align: center;
    bottom: 0;
    position: absolute;
    width: 100%;
}

#footer a{
    text-decoration: none;
}

@font-face{
    font-family: ubuntu;
    src: local(Ubuntu), url('../font/Ubuntu-M.ttf') format('opentype');
}

@font-face{
    font-family: ubuntu-kurus;
    src: local(Ubuntu), url('../font/Ubuntu-L.ttf') format('opentype');
}

/*-------LOGIN STARTS HERE -------*/

/* Login Container (default to float:right) */
#loginContainer {
    position:relative;
    float:right;
    font-size:12px;
    width: 100px;
    height: 25px;
    background: #fdc86b;
    margin-right: 15px;
    text-align: center;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    cursor: auto;
}

/* Login Button */
#loginButton { 
    display:inline-block;
    float:right;
    width: 100px;
    height: 20px;
    background: #fdc86b;
    border-radius:2px;
    position:relative;
    z-index:30;
    cursor:pointer;
    vertical-align: central;
    padding-top: 5px;
    font-family: ubuntu-kurus;
    font-size: 13px;
}

/* Login Button Text */
#loginButton span {
    color: #7e6436;
    display:block;
    font-family: ubuntu-kurus;
}

#loginButton:hover {
}

/* Login Box */
#loginBox {
    position:absolute;
    top:34px;
    right:0;
    display:none;
    z-index:29;
}

/* If the Login Button has been clicked */    
#loginButton.active {
    border-radius:3px 3px 0 0;
    height: 28px;
    background:#eedbba;
    border-top:1px solid #899caa;
    border-left:1px solid #899caa;
    border-right:1px solid #899caa;
}

#loginButton.active span {
    background-position:53px -76px;
}

/* A Line added to overlap the border */
#loginButton.active em {
    position:absolute;
    width:100%;
    height:1px;
    bottom:-1px;
}

/* Login Form */
#loginForm {
    width:248px; 
    border:1px solid #899caa;
    border-radius:2px 0 2px 2px;
    -moz-border-radius:2px 0 2px 2px;
    margin-top:-1px;
    background:#eedbba;
    padding:6px;
    font-family: ubuntu-kurus;
}

#loginForm fieldset {
    margin:0 0 12px 0;
    display:block;
    border:0;
    padding:0;
}

fieldset#body {
    background:#fff;
    border-radius:2px;
    -moz-border-radius:2px;
    padding:10px 13px;
    margin:0;
}

#loginForm #checkbox {
    width:auto;
    margin:1px 9px 0 0;
    float:left;
    padding:0;
    *margin:-3px 9px 0 0; /* IE7 Fix */
}

#body label {
    color:#3a454d;
    margin:9px 0 0 0;
    display:block;
    float:left;
}

#loginForm #body fieldset label {
    display:block;
    float:none;
    margin:0 0 6px 0;
    text-align: left;
    margin-left: 7px;
}

/* Default Input */
#loginForm input {
    width:92%;
    border:1px solid #899caa;
    border-radius:2px;
    -moz-border-radius:2px;
    color:#3a454d;
    padding:8px 8px;
    box-shadow:inset 0px 1px 3px #bbb;
    -webkit-box-shadow:inset 0px 1px 2px #bbb;
    -moz-box-shadow:inset 0px 1px 2px #bbb;
    font-size:12px;
}

/* Sign In Button */
#loginForm #login {
    width:auto;
    float:left;
    background:#fdc86b;
    color:#7e6436;
    padding:7px 10px 8px 10px;
    border:1px solid #339cdf;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    margin:0 12px 0 0;
    cursor:pointer;
    *padding:7px 2px 8px 2px; /* IE7 Fix */
}

/* Forgot your password */
#loginForm span {
    text-align:center;
    display:block;
    padding:7px 0 4px 0;
}

#loginForm span a {
    color:#3a454d;
    font-size:12px;
    text-decoration: none;
}

input:focus {
    outline:none;
}

.category-item-hasil{
    width: 50px;
    height: 50px;
    display: block;
    text-align: center;
    font-size: 12px;
    margin-right: 5px;
    font-family: ubuntu-kurus;
    margin-top: 5px;
}

#wrapper #search-hasil{
    width: 900px;
    margin: 0px auto;
}

#search-hasil #namboot-button{
    height: 39px;
    width: 190px;
    margin: 0px auto;
    border-radius: 2px;
    font-family: ubuntu;
    background: #fdc86b;
    border: none;
    cursor: pointer;
}

#hasil-pencarian{
    
}

.item-hasil{
    width: 150px;
    height: 200px;
    border-radius: 2px;
    box-shadow: darkgray 1px 0px 2px 1px;
    margin-right: 15px;
    margin-top: 10px;
    float: left;
}

.item-hasil .img{
    margin: 0px auto;
    width: 100px;
    margin-top: 5px;
}

.item-hasil .info{
    text-align: left;
    width: 150px;
    margin-top: 5px;
}

#profpic{
    width: 100px;
    height: 100px;
    box-shadow: darkgray 1px 0px 2px 1px;
    border-radius: 2px;
    margin-top: 10px;
    float: left;
}

#info-profile{
    width: 700px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
}

#profile{
    height: 120px;
    border-bottom: 1px dashed gray;
}

.menu{
    width: 70px;
    margin: 0px auto;
    margin-top: 15px;
}

#notification{
    float: right;
    margin-top: 5px;
    margin-right: 15px;
}


#notification a{
    margin-right: 10px;
}

#message-menu{
    margin-right: 20px;
    padding: 0px;
}

#message-menu ul{
    margin: 0px;
}

#message-menu ul li{
    list-style: none;
    display: block;
}

#message-list{
    margin-left: 200px;
    width: 600px;
}

#message-list tr{
    
}

#message-list tr td{
}

#avatar{
    float: right;
    font-size: 13px;
    color: #ededec;
}

#avatar-name{
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}

#avatar-name a{
    color: #fff;
    text-decoration: none;
}

#avatar-pic{
    float: right;
}

#tentang{
    text-align: justify;
}

#faq{
    height: auto;
    padding-bottom: 25px;
}

#super-wrap{
    height: 550px;
}

#compose{
    position: fixed;
    z-index: 650;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); 
}

#compose #compose-window{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 550px;
    height: 400px;
    margin-left: -300px;
    margin-top: -200px;
    background: #fff;
    padding: 5px 5px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 5px;
    text-align: left;
    color: #000;
}

#compose #compose-window label{
    width: 50px;
    display: block;
    float: left;
    margin-left: 50px;
    margin-bottom: 10px;
}

#compose #compose-window input{
    width: 350px;
    display: block;
    margin-left: 20px;
    margin-bottom: 10px;
}

#compose #compose-window .kepada{
    margin-top: 50px;
}

#compose #compose-window #pesan-kirim, #compose #compose-window #pesan-batal{
    width: 100px;
    float: left;
    margin-top: 20px;
    background: #fdc86b;
    color: #7e6436;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#compose #compose-window #pesan-kirim{
    margin-left: 100px;
}

#compose #compose-window #isi{
    width: 350px;
    height: 200px;
}

#reply{
    margin-top: 10px;
}
#search-head{
    height: 50px;
    background-image: url("../asset/sub-head.png");
    width: 100%;
}

.search-icon{
    margin-right: 15px;
    cursor: pointer;
}

.search-box, .dropdown-search, .search-button{
    height: 30px;    
    border: solid 2px #d0d0ce;
    border-radius: 2px;
    font-family: ubuntu;
}
.search-box{
    width: 400px;
}
.dropdown-search{
    width: 100px;
}

.search-button{
    width: 120px;
    background: #fdc86b;
    border: solid 2px #b8975c;
    color: #7e6436;
    cursor: pointer;
}

#search-head-inside{
    margin: 0px auto;
    width: 750px;
    padding-top: 10px;
}

.segitiga{
    z-index: 2;
    position: absolute;
    top: 50px;
    right: 395px;
}

#search-home{
    height: 150px;
    background: #000;
    width: 100%;
}

#search-home-inside{
    margin: 0px auto;
    width: 750px;
    padding-top: 60px;
}